<template>
    <el-main>
        <el-form 
        :model="LoginForm"
        ref="LoginForm"
        :rules="rule"
        class="logform"
        label-width="0">

        <h3>用户登录</h3>

        <el-form-item prop="tel">
            <el-input 
            type="text"
            v-model.number="LoginForm.tel"
            placeholder="电话号码">
            </el-input>
        </el-form-item>

        <el-form-item prop="codeNum">
            <el-input
                v-model="LoginForm.codeNum"
                class="codeNum"
                placeholder="验证码"
            >
            </el-input>
            <el-button 
                class="getCode" 
                type="primary"
                @click.native.prevent="getCodeNum"
                >
                获取验证码
            </el-button>                
        </el-form-item>

        <el-form-item >
            <el-button 
            type="success" 
            class="submitBtn"
            round
            @click.native.prevent="submit"
            :loading="logining">
            登录
            </el-button>
        </el-form-item>

        </el-form>
  </el-main>
</template>

<script>
import router from "../../router";
import api from "../../fetch/api";
export default {
  data() {
    let telCheck = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("电话号码是必须的"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("电话号码必须是数字"));
      } else if (value.toString().length !== 11) {
        return callback(new Error("电话号码必须是11位数字"));
      } else {
        callback();
      }
    };
    let codeNumCheck = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("验证码是必须的"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("验证码必须是数字"));
      }
    };
    return {
      LoginForm: {
        tel: "",
        codeNum: ""
      },
      logining: false,
      rule: {
        tel: [
          {
            required: true,
            validator: telCheck,
            trigger: "blur"
          }
        ],
        codeNum: [
          {
            required: true,
            validator: codeNumCheck,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 表单提交
    submit() {
      this.$refs["LoginForm"].validate(valid => {
        if (valid) {
          let data = {
            phone: this.LoginForm.phone,
            codeNum: this.LoginForm.codeNum
          };
          api
            .Login_Two(data)
            .then(
              res => {
                this.logining = false;
                this.$message({
                  message: "登录成功!",
                  type: "success"
                });
                sessionStorage.setItem("user", JSON.stringify(res.data));
                setTimeout(() => {
                  this.$router.push("/");
                }, 1500);
              },
              err => {
                this.logining = false;
                this.$message({
                  message: "验证码错误！",
                  type: "warning"
                });
              }
            )
            .catch(error => {
              console.log(error);
            });
        } else {
            console.log("submit err");
        }
      });
    },

    // 获取验证码
    getCodeNum() {
      let phone = this.LoginForm.phone;
      if (valid) {
        api.GetCodeNum(phone).then(res => {
          this.logining = false;
          this.$message({
            message: "发送成功!",
            type: "success"
          });
        });
      }
    }
  }
};
</script>

<style scoped>
.logform {
  margin: 20px auto;
  width: 310px;
  background: #fff;
  box-shadow: 0 0 10px #b4bccc;
  padding: 30px 30px 0 30px;
  border-radius: 25px;
}
.submitBtn {
  width: 65%;
  margin-bottom: 20px;
}
.codeNum {
  width: 67%;
}
.getCode {
  width: 31%;
}
</style>


